<template>
  <div id="myself">
    <div class="myselfBgc">
      <h2>个人资料</h2>
    </div>
    <!--修改密码-->
    <div>
      <form class="form">
        <div>
          <h3>修改密码</h3>
        </div>
        <!--邮箱-->
        <div class="user"  :style="border4">
          <label for="user"><img :src="Images.email"></label>
          <input id="user" type="email"  @focus="fs4" @blur="bl4" placeholder="邮箱"   v-model="userEmail">
        </div>
        <!--邮箱验证码-->
        <div class="user" :style="border5">
          <label for="emailCode"><img :src="Images.emailGet"></label>
          <input id="emailCode" type="text" @focus="fs5" @blur="bl5" placeholder="请输入邮箱验证码" v-model="emailCode">
          <span><button :disabled="disabled" id="obtain" @click="obtain">{{leftText}}</button></span>
        </div>
        <!--密码-->
        <div class="user"  :style="border6">
          <label for="psw"><img :src="Images.pwd"></label>
          <input id="psw" type="password" @focus="fs6" @blur="bl6" placeholder="请输入新密码" v-model="userPWD">
        </div>
        <!--邀请码-->
        <div class="user"  :style="border7">
          <label for="request"><img :src="Images.pwd1"></label>
          <input id="request" type="password" @focus="fs7" @blur="bl7" placeholder="请确认密码" v-model="userPWD2">
        </div>
        <div class="button">
          <button @click="modify11">确认修改</button>
        </div>
      </form>
    </div>
    <!--背景颜色-->
    <div class="bgd"></div>
    <div class="footer">
      <footer-one></footer-one>
    </div>
  </div>
</template>
<script>
  //密码
  import pwdImg2 from '../../assets/icon_password_sign.png'
  import pwdImg11 from '../../assets/icon_password_sign_mark.png'
  //右侧验证码
  import verification from '../../assets/icon_verification_image.png'
  import verification1 from '../../assets/icon_verification_image_mark.png'
  //邮箱
  import email from '../../assets/icon_verification_email.png'
  import email1 from '../../assets/icon_verification_email_mark.png'
  //验证码
  import emailGet from '../../assets/icon_email.png'
  import emailGet1 from '../../assets/icon_email_mark.png'
  //邀请码
  import invite from '../../assets/icon_invite_sign.png'
  import invite1 from '../../assets/icon_invite_sign_mark.png'
  //
  import edit from '../../assets/edit.png'
  import FileImg from '../../components/firmware/file.vue'
  import FooterOne from '../../components/firmware/footer.vue'
  export default{
    name:'modifypwd',
    data(){
      return{
        Images:{
          email:email,
          emailGet:emailGet,
          pwd:pwdImg2,
          pwd1:pwdImg2
        },
        border4:{
          borderBottomColor:'',
        },
        border5:{
          borderBottomColor:'',
        },
        border6:{
          borderBottomColor:'',
        },
        border7:{
          borderBottomColor:'',
        },
        //focusStatus:false,
        userEmail:'',
        //新密码
        userPWD:'',
        //验证码
        rerifyCode:'',
        //邮箱验证码
        emailCode:'',
        //确认密码
        userPWD2:'',
        //邮箱验证码
        leftText:'获取',
        disabled:false,
        imgEdit:edit,
        screenHeight: window.screen.height-150,
      }
    },
    //注册组件
    components:{FooterOne,FileImg},
    //实例加载完执行函数
    mounted(){
      //设置模块高度
      document.getElementById('myself').style.height=this.screenHeight+"px";//页面初始化
    },
    methods:{
      //失去焦点
      bl4:function () {
        var _self = this;
        _self.$set(_self.Images,'email',email);
        _self.$set(_self.border4,'borderBottomColor','rgba(123,128,128,0.2)');
      },
      //获得焦点
      fs4:function () {
        var _self = this;
        _self.$set(_self.Images,'email',email1);
        _self.$set(_self.border4,'borderBottomColor','#FF7A3F');
      },
      //失去焦点
      bl5:function () {
        var _self = this;
        _self.$set(_self.Images,'emailGet',emailGet);
        _self.$set(_self.border5,'borderBottomColor','rgba(123,128,128,0.2)');
      },
      //获得焦点
      fs5:function () {
        var _self = this;
        _self.$set(_self.Images,'emailGet',emailGet1);
        _self.$set(_self.border5,'borderBottomColor','#FF7A3F');
      },
      //失去焦点
      bl6:function () {
        var _self = this;
        _self.$set(_self.Images,'pwd',pwdImg2);
        _self.$set(_self.border6,'borderBottomColor','rgba(123,128,128,0.2)');
      },
      //获得焦点
      fs6:function () {
        var _self = this;
        _self.$set(_self.Images,'pwd',pwdImg11);
        _self.$set(_self.border6,'borderBottomColor','#FF7A3F');
      },
      //失去焦点
      bl7:function () {
        var _self = this;
        _self.$set(_self.Images,'pwd1',pwdImg2);
        _self.$set(_self.border7,'borderBottomColor','rgba(123,128,128,0.2)');
      },
      //获得焦点
      fs7:function () {
        var _self = this;
        _self.$set(_self.Images,'pwd1',pwdImg11);
        _self.$set(_self.border7,'borderBottomColor','#FF7A3F');
      },
      //获取邮箱验证码
      obtain:function(){
        console.log(123)
        var _self = this;
        _self.disabled = true;
        _self.leftText ='已发送'
      },
      //修改密码
      modify11:function () {
          console.log(12451245);
          let _self = this;
        //路由转跳
//        _self.$router.go('/account/myselfData');
        _self.$router.push({path:'/account/myselfData'})

      }
    },
    //监听
    watch:{
      screenHeight (val) {
        console.log(val)
        this.screenHeight = val
        document.getElementById('myself').style.height = this.screenHeight -150 + "px";//检测窗口的大小，并赋值
      },
    }
  }
</script>
<style scoped>
  #myself{
    width: 100%;
    margin: auto;
  }
  .myselfBgc{
    background: url("../../assets/bg_background.png") no-repeat;
    background-size:100% 100%;
    -moz-background-size:100% 100%;
    display: table;
    height: 20%;
    margin: auto;
    width: 100%;
  }
  .myselfBgc h2{
    display: table-cell;
    vertical-align: middle;
    color: #ffffff;
    font-size: 2.0rem;
    font-weight: 100;
    letter-spacing:2px;
  }
  div, h2, h3{
    margin: 0;
    padding: 0;
  }
  img{
    max-height: 100%;
    max-width:100%
  }
  input{
    border: 0;
    text-indent: 1rem;
    outline:none;
    background-color: #f5f5f5;
  }
  .close img{
    margin-top: 20px;
  }
  .form{
    text-align: center;
    background-color: #f5f5f5;
    padding-top: 10px;
    margin:3rem auto 0;
    width: 80%;
  }
  .form div{
    padding: 25px 0px 0px 5px;
    height: 2.0rem;
    /*width: 500px;*/
  }
  h3{
    font-size: 1.2rem;
    font-weight: 100;
    color:#515151;
  }
  p{
    font-size: 0.8rem;
    font-weight: 100;
    color:#FF7A3F;
    padding: 20px 0 10px;
  }
  .form .user{
    margin: auto;
    border-bottom: 1px solid rgba(123,128,128,0.2);
    width: 30%;
    text-align: left;
  }

  .form  span{
    font-size: 0.5rem;
    text-align: right;
    cursor: pointer;
    float: right;
  }
  .form .password span:hover{
    color:#FF7A3F;
  }
  #obtain{
    border: 0;
    padding: 5px 2px;
    width: 55px;
    color: #ffffff;
    background-color: #FF7A3F;
    margin-top: -6px;
    outline: none;
    border-radius: 2px;
    cursor: pointer;
  }
  .form .button button{
    width: 25%;
    height: 2rem;
    background-color: #FF7A3F;
    color: #f5f5f5;
    border: 0;
    margin: 30px 0 30px 0 ;
    outline: none;
    border-radius: 2px;
  }
  .form .button button:hover{
    background-color: red;
    cursor: pointer;
  }


  .bgd{
    background: #f5f5f5;
    /*color: rgb(232, 232, 232);*/
    white-space: pre;
    font-family: Menlo, Consolas, monospace;
    font-size: 13px;
    position: fixed;
    z-index: -9999;
    padding: 10px;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    overflow: auto;
    text-align: left;
  }
  /*清除浮动*/
  .clearFix:after{
    content: '';
    clear: both;
    display: block;
  }
  .footer{
    position: fixed;
    left: 0;
    right: 0;
    bottom:0;
    min-width: 1200px;
    z-index: 1;
    background-color: #ffffff;
  }
</style>

